<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Css/style.css" rel="stylesheet" type="text/css" />
<link href="Css/colorpicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script src="Js/themer.js" type="text/javascript"></script>
<script src="Js/colorpicker-min.js" type="text/javascript"></script>
<style type="text/css">
/*OVERWRITE STYLE*/
body
{
background-color:#000;
}

#content
{
background-image:url(images/circuit.png);
}
div#head, 
div.bg-sidebar, 
div#content .bloc .title, 
div#footer
{
background-color:#380400;
}

div#content .bloc .title, 
div#head a, 
div#footer p
{
color:#ffffff;
}

</style>
</head>

<body>


	<div id="themer">
        <div id="themer-content">
        	
            <div id="themer-toggle"></div>
			 <div id="themer-content-content">
				<div>
				<textarea rows="5" id="viewCSS" ></textarea>
				</div>
				<div id="theme-presets-container" class="themer-section">

					<label for="theme-presets">Color Presets</label>

				</div>

				<div class="themer-separator"></div>

				<div id="theme-pattern-container" class="themer-section">

					<label for="theme-patterns">Background</label>

				</div>

				<div class="themer-separator"></div>

				<div class="themer-section">

					<ul>

						<li class="clearfix"><span>Base Color</span> <div id="base-cp" class="cp-trigger"></div></li>

						<li class="clearfix"><span>Background color</span> <div id="Background-cp" class="cp-trigger"</div></li>

						<li class="clearfix"><span>Highlight Color</span> <div id="highlight-cp" class="cp-trigger"</div></li>


						<li class="clearfix"><span>Text Color</span> <div id="text-cp" class="cp-trigger"></div></li>

					</ul>

				</div>

				<div class="themer-separator"></div>

				<div class="themer-section">
					<input type="button" id="themer-getcss" value="Get CSS"/>
					<input type="button" id="themer-savecss" value="save theme"/>
				</div>

			</div>

			<div id="themer-css-dialog">

				<form class="form">

					<div class="form-row">

						<div class="form-item">

							<textarea cols="auto" rows="auto" readonly="readonly"></textarea>

						</div>

					</div>

				</form>

			
			
			
			
			
			
			
			
			
			
			
			
			
			</div>
        </div>
        
    </div>











    <!-- head-->
    <div id="head">
    				<div class="wrap">
                        <div class="logo">logo</div>
        
                        <div class="account">
                            <a href="#" class="button profile"><img src="Images/huser.png" alt=""></a>
                            Hi, 
                            <a href="#">John Doe</a>
                            |
                            <a href="#">Logout</a>
                        </div>
                    </div>
    
    </div>
    <!-- end head-->
    <div class="wrap">
    <!-- sidebar-->
     <div class="bg-main"></div>
   <div class="bg-sidebar"></div>
   <div id="sidebar">
          <ul class="accordion">
			<li id="one" class="home">
				<a href="#one">My Home</a>

			</li>
			<li id="one" class="article">

				<a href="#one">Article<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
					
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

				</ul>

			</li>
			

			
			<li id="three" class="account">

				<a href="#three">account<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>

					<li><a href="#"><em>03</em>Options<span>27</span></a></li>

					<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

					<li><a href="#"><em>06</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four" class="setting">

				<a href="#four">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Log Out</a></li>
					
					<li><a href="#"><em>02</em>Delete Account</a></li>

					<li><a href="#"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>		
	

	<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideToggle('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}

			});

		});

	</script>
        </div>
    <!-- end sidebar-->
    
    <!-- content-->
    <div id="content" class="white">   
                        
                       <h1><img src="Images/posts.png" alt=""> Dashboard
                        </h1>
                                        
                        <div class="bloc left">
                            <div class="title">
                                Dashboard
                            <a href="#" class="toggle"></a></div>
                            <div class="content dashboard">
                                <div class="center" style="width: auto; display: block; ">
                                    <a href="#" class="shortcut">
                                        <img src="Images/page.png" alt="" width="48" height="48">
                                        Write an Article
                                    </a>
                                    <a href="#" class="shortcut">
                                        <img src="img/picture.png" alt="" width="48" height="48">
                                        Write an Article
                                    </a>
                                    <a href="#" class="shortcut">
                                        <img src="img/contact.png" alt="" width="48" height="48">
                                        Manage contacts
                                    </a>
                                    <a href="#" class="shortcut last">
                                        <img src="img/event.png" alt="" width="48" height="48">
                                        Manage events
                                    </a>
                                    <div class="cb"></div>
                                </div>
                                <p>Icons by <a href="http://icondrawer.com">icondrawer.com</a></p>
                            </div>
                        </div>
                        
                        
                                        
                                <div class="bloc right">
                                    <div class="title">Select and Textarea<a href="#" class="toggle"></a></div>
                                    <div class="content">
                                        <div class="input">
                                            <label for="select">This is a "select" input</label>
                                            <div class="selector" id="uniform-select"><span>First value</span><select name="select" id="select" style="opacity: 0; ">
                                                <option value="1">First value</option>
                                                <option value="2">Second value</option>
                                                <option value="3">Third value</option>
                                            </select></div>
                                            Some informations on how to use this field
                                        </div>
                                        <div class="input textarea">
                                            <label for="textarea1">Textarea</label>
                                            <textarea name="text" id="textarea1" rows="7" cols="4"></textarea>
                                        </div>
                                        <div class="submit">
                                            <input type="submit" value="Enregistrer">
                                            <input type="reset" value="Black button" class="black">
                                            <input type="reset" value="White button" class="white">
                                        </div>
                                    </div>
                                </div>
                                                        
                        <div class="cb"></div>
                        
                        <div class="bloc">
                            <div class="title">What's new<a href="#" class="toggle"></a></div>
                            <div class="content">   
                                        <h5>10/10/2011</h5>
                                <ul>
                                    <li>
                                        New minify system, you can now do change to Javascript sourcecode and generates a minfiy version after all using <a href="lib/minify/b=app/webroot/demo/coreadmin/js&amp;f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.js,main.js">this link</a>
                                    </li>
                                    <li>New alert messages</li>
                                    <li>CSS Merged into one CSS</li>
                                    <li>New input "loading" added to display a loading state on a specific field</li>
                                    <li>Fixed a bug caused by "Console.log" that broke charts on Internet Explorer</li>
                                    <li>Fixed a bug with uniform plugin that doesn't work with jQuery 1.6 (attr('checked') replaced by is(':checked')</li>
                                    <li>A new element (class "logo") allow you to add your own branding in the head (your logo has to be 42 pixel high</li>
                                    <li>The left sidebar can be collapsed !</li>
                        
                                </ul>
                                <h5>09/08/2011</h5>
                                <ul>
                                    <li>Minor CSS bug fixes</li>
                                    <li>New gallery template</li>
                                    <li>New tabs code, the new code uses jQuery.cookie to remember what tab was opened</li>
                                    <li>Minified CSS and Minified Javascript is now include, no need to include 200 scripts anymore</li> 
                                    <li>Infinite sublevel for left sidebar (thanks @sscowden for suggestion)</li>
                                </ul>
                                <h5>01/07/2011</h5>
                                <ul>
                                    <li>Fixed path for CSS and Javascript files on HTML demos</li>
                                    <li>Charts script updated, you can now add tooltips using ‘tips’ class on table</li>
                                </ul>
                                <h5>16/06/2011</h5>
                                <ul>
                                    <li>Completely reworked substyles system, you have now 3 sidebars styles, 2 body styles and 3 bloc styles. Wood styles completely reworked.</li>
                                    <li>Added icons so you don’t have to look for icons</li>
                                    <li>Added galllery system</li>
                                    <li>Settings pannel added on the demo so you can test substyles easily</li>
                                    <li>Modal style added, so you can open subpages within modal boxes</li>
                                    <li>Fixed a bug on page that didn’t have title</li>
                                </ul>
                                <h5>06/06/2011</h5>
                                <ul>
                                    <li>Fixed a bug on menu links with submenu</li>
                                    <li>Added some styles on datepicker (now “today” and “current day” have different style)</li>
                                </ul>
                        
                            </div>
                        </div>
                                   
                        
                        <div class="bloc">
                            <div class="title">
                                Shortcuts
                            <a href="#" class="toggle"></a></div>
                            <div class="content">
                                <a href="index.php?p=typo" class="shortcut">
                                    <img src="img/icons/font.png" alt="">
                                    Typography
                                </a>
                                <a href="index.php?p=table" class="shortcut">
                                    <img src="img/icons/window.png" alt="" width="32" height="32">
                                    Table
                                </a>
                                <a href="index.php?p=notif" class="shortcut">
                                    <img src="img/icons/warning.png" alt="" width="32" height="32">
                                    Notifications
                                </a>
                                <a href="index.php?p=forms" class="shortcut">
                                    <img src="img/icons/posts.png" alt="" width="32" height="32">
                                    Forms
                                </a>
                                <a href="index.php?p=charts" class="shortcut">
                                    <img src="img/icons/chart.png" alt="" width="32" height="32">
                                    Charts
                                </a>
                                <a href="index.php?p=calendar" class="shortcut">
                                    <img src="img/icons/calendar.png" alt="" width="32" height="32">
                                    Calendar
                                </a>
                                <div class="cb"></div>
                            </div>
                        </div>                  
                             
    </div>
    <!-- end content-->
    </div>
    
    <div id="footer">
    <div class="wrap"><p>@2012 BigShare Tran</p></div>
    </div>
</body>
</html>
